<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .box1 {
                font-size: 50px;
                font-family: 微软雅黑;

                /*
                        text-decoration 设置文本修饰(可以用于添加下划线和去除下划线)
                                可选值:
                                    none 什么都没有
                                    underline 下划线
                                    line-through 删除线
                                    overline 上划线
                */
                /*text-decoration: overline;*/

                text-decoration: underline red dotted;

            }

            .box2 {

                width: 200px;

                /*
                    white-space 设置网页如何处理空白
                            可选值:
                                normal 正常
                                nowrap 不换行
                                pre 保留空白
                */
                white-space: pre;
                /*裁剪水平方向溢出的文字*/
                overflow: hidden;
                /*  将裁剪的文字添加省略号 */
                text-overflow: ellipsis;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            今天天气真不错
        </div>

        <div class="box2">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet exercitationem fuga recusandae? Dolorem et
            maxime nam recusandae sapiente sunt! Ad aliquam aliquid animi at debitis deserunt ducimus eaque earum
            eveniet ex ipsa natus nemo nobis, numquam officia quam quibusdam quidem ratione recusandae tempore unde
            veritatis vitae? A cumque expedita inventore labore, nihil perferendis voluptate? Ab autem commodi
            consequuntur, cumque distinctio dolores, earum eveniet exercitationem expedita explicabo fugit harum
            incidunt iusto laudantium minus mollitia nam nemo nesciunt nulla numquam omnis pariatur placeat praesentium
            provident quod quos rem veritatis, vero voluptate voluptates. Consequuntur ipsum perspiciatis quia
            repellendus soluta totam velit voluptatibus? Dignissimos.
            aa
            aa
            aa
            aa
        </div>
    </body>
</html>